<template>
  <div class="box">
    <header></header>
    <main>
      <!-- 左侧 -->
      <div class="lef">
        <lefttop />
        <leftbot />
      </div>
      <!-- 中间 -->
      <div class="center">
        <div class="center1">
          <Center1></Center1>
        </div>
      </div>

      <div class="centerbom">
        <Center2></Center2>
      </div>
      <!-- 右侧 -->
      <div class="rig">
        <righttop />
        <rightbot />
      </div>
    </main>
  </div>
</template>
<script >
import Center1 from '@/components/Center1.vue'
import lefttop from '../components/Lefttop.vue'
import leftbot from '../components/Leftbot.vue'
import righttop from '../components/Righttop.vue'
import rightbot from '../components/Rightbot.vue'
import Center2 from '../components/Center2.vue'
export default {
  components: {
    lefttop,
    leftbot,
    righttop,
    rightbot,
    Center1,
    Center2
  }
}
</script>

<style scoped>
main {
  position: absolute;
  left: 0;
  top: 0;
}
.box {
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url('../assets/images2/pageBg.png');
}
header {
  width: 100vw;
  height: 80px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  background: url('../assets/images2/Top.png') no-repeat;
  background-size: 100% 100%;
}
main {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
}
.center {
  width: 36vw;
  height: 100vh;
}

.center1 {
  width: 100%;
  height: 60vh;
  margin-top: 50px;
  /* border: solid 1px red; */
}
.centerbom {
  width: 100%;
  height: 10vh;
  /* border: solid 1px red; */
  margin-top: 72vh;
  margin-right: 190px;
}
</style>